<template>
  <div class="tips">
    <ul>
      <li v-for="(item, index) in props.tipList" :key="index" @click="handleClick(index)">
        <i class="iconfont icon-dizhi"></i>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue'
const map = inject('map')
const AMap = inject('AMap')
let marker = ref(null) //跳转标记的实例
const props = defineProps({
  tipList: {
    type: Array,
    default: () => [],
  },
})

//点击搜索结果的事件
const handleClick = (index) => {
  // console.log(index)
  // console.log(props.tipList[index].location.lng)
  const lngLat = [
    Number(props.tipList[index].location.lng),
    Number(props.tipList[index].location.lat),
  ]
  // console.log(lngLat)
  map.value.setCenter(lngLat, false, 1000)
  if (marker.value) {
    map.value.remove(marker.value)
    // console.log('移除marker')
  }
  // console.log(lngLat[0], lngLat[1])
  marker.value = new AMap.value.Marker({
    position: new AMap.value.LngLat(lngLat[0], lngLat[1]),
    title: `${props.tipList[index].name}`,
  })
  // console.log(props.tipList[index].name)
  map.value.add(marker.value)
}
</script>

<style lang="scss" scoped>
.tips {
  width: 360px;
  // height: 450px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border-radius: 3px;
  ul {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    li {
      cursor: pointer;
      color: #555;
      font-size: 14px;
      i {
        margin-right: 10px;
      }
    }
  }
}
</style>
